<ion-header>
    <ion-navbar color="orange">
        <ion-title>
            社区
        </ion-title>
        <ion-buttons end>
            <button ion-button icon-only>
                <ion-icon name="contact"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

<ion-content>
    <!-- banner开始 -->
    <div class="ht-100 ht-overflow s-banner" *ngIf="banners && banners.length">
        <ion-slides class="text-slide" [autoplay]="3000" [loop]="true">
            <ion-slide *ngFor="let banner of banners">
                <img [src]="util.parseImageUrl(banner.picture)" alt="">
            </ion-slide>
        </ion-slides>
    </div>
    <!-- banner结束 -->
    <!-- 搜索栏开始 -->
    <!--<div class="s-search">-->
        <!--<div class="ht-100 ht-overflow ht-background ht-line-25 ht-radius-30">-->
            <!--<div class="ht-8 ht-float-left ht-height ht-overflow">-->
                <!--<div class="s-xl">-->
                    <!--<img src="assets/imgs/icon-xs.png" alt="">-->
                <!--</div>-->
            <!--</div>-->
            <!--<div class="ht-90 ht-float-left">-->
                <!--<ion-searchbar-->
                        <!--[(ngModel)]="myInput"-->
                        <!--[showCancelButton]="shouldShowCancel"-->
                        <!--(ionInput)="onInput($event)"-->
                        <!--(ionCancel)="onCancel($event)"-->
                        <!--placeholder="搜索"-->
                <!--&gt;搜索-->
                <!--</ion-searchbar>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
    <!-- 搜索栏结束 -->
    <!-- 公告开始 -->
    <div padding-horizontal class="marquee flex" *ngIf="notices && notices.length">
    <span class="marquee-icon">
        <ion-icon ios="ios-volume-up" md="md-volume-up"></ion-icon>
    </span>
        <ion-slides class="text-slide" [autoplay]="3000" [loop]="true" direction="vertical">
            <ion-slide *ngFor="let notice of notices">
                <p text-left>{{notice.ad_name}}</p>
            </ion-slide>
        </ion-slides>
    </div>
    <!-- 公告结束 -->
    <div class="ht-f8f8f8 ht-overflow">
        <!-- 按钮组开始 -->
        <div padding class="ht-overflow ht-margin-bottom ht-background" *ngIf="sub_nav && sub_nav.length">
            <!-- 论坛 -->
            <div class="ht-33 ht-float-left" *ngFor="let nav of sub_nav">
                <div class="box" [ngClass]="{'xiaoguo': tab == nav.kind}" (click)="changeTab(nav.kind,nav.type_id)">
                    <img src="assets/imgs/icon-lt.png" alt="" class="s-sq-img">
                    <div class="ht-100 ht-line-20 ht-font-14 ht-000 ht-text-center">
                        {{nav.type_name}}
                    </div>
                </div>
            </div>
        </div>
        <!-- 按钮组结束 -->
        <!-- 信息开始 -->
        <div *ngIf="tab == 'service_bbs'">
            <div class="ht-margin-bottom ht-background ht-overflow" padding-top *ngFor="let info of infolist">
                <p padding-left padding-right class="ht-font-14 ht-000 ht-line-25" [navPush]="'ArticleDetailPage'" [navParams]="{id:info.amoy_id}">
                    {{info.title}}
                </p>
                <div padding-left padding-right margin-top class="flex flex-wrap" *ngIf="info.cover && info.cover.length">
                    <div class="pic-box" *ngFor="let pic of info.cover">
                        <img [src]="util.parseImageUrl(pic)" alt="">
                    </div>
                </div>
                <div class="ht-100 ht-overflow ht-border-bottom" padding>
                    <div class="ht-10 ht-float-left">
                        <img [src]="util.parseImageUrl(info.head_img)" alt="" class="c-tx">
                    </div>
                    <div class="ht-90 ht-float-left ht-overflow ht-padding-tb5 ht-999">
                        <div class="ht-float-left">{{info.nickname}}</div>
                        <div class="ht-float-right ht-overflow flex flex-align-center">
                            <div class="ht-float-left ht-padding-l5">{{info.time_quantum}}</div>
                            <div class="ht-float-left ht-padding-l5">
                                <!--<img src="assets/imgs/icon-fx.png" alt="" class="c-icon">-->
                                <span class="ht-float-left"><i class="fa fa-share-square"></i> 100</span>
                            </div>
                            <div class="ht-float-left ht-padding-l5">
                                <!--<img src="assets/imgs/icon-pl.png" alt="" class="c-icon">-->
                                <span class="ht-float-left"><i class="far fa-comment"></i> 评论</span>
                            </div>
                            <div class="ht-float-left ht-padding-l5">
                                <!--<img src="assets/imgs/icon-z.png" alt="" class="c-icon">-->
                                <span class="ht-float-left"><i class="far fa-heart"></i> 赞</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
                <ion-infinite-scroll-content></ion-infinite-scroll-content>
            </ion-infinite-scroll>
        </div>
        <div *ngIf="tab == 'service_story'">
            <div class="ht-100 ht-overflow ht-background" padding>
                <!-- 大 -->
                <div *ngFor="let info of infolist;let i = index">
                    <div class="ht-100 ht-border-bottom ht-padding-bottom10" *ngIf="i == 0">
                        <span class="ht-100 ht-font-15 ht-666 ht-yc"  [navPush]="'ArticleDetailPage'" [navParams]="{id:info.amoy_id}">
                            {{info.title}}
                        </span>
                        <img src="assets/imgs/service-banner.png" alt="" class="ss-img" padding-top padding-bottom [navPush]="'ArticleDetailPage'" [navParams]="{id:info.amoy_id}">
                        <div class="ht-overflow ht-100">
                            <div class="ht-float-left ht-999 ht-font-14">
                                <span class="ss-zd">置顶</span>
                                {{info.nickname}}
                            </div>
                            <div class="ht-float-right ht-999">
                                <div class="ht-float-left ht-padding-lr ht-line-20 ht-font-15">{{info.time_quantum}}
                                </div>
                                <div class="ht-float-left ht-padding-l5">
                                    <!--<img src="assets/imgs/icon-pl.png" alt="" class="c-icon">-->
                                    <span class="ht-float-left"><i class="far fa-comment"></i> 评论</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="ht-overflow ht-border-bottom" padding-top padding-bottom *ngIf="i != 0">
                        <div class="ht-30 ht-float-left"  [navPush]="'ArticleDetailPage'" [navParams]="{id:info.amoy_id}">
                            <img src="assets/imgs/service-banner.png" alt="" class="ss-img2">
                        </div>
                        <div class="ht-float-left ht-overflow  ht-70" padding-left>
                            <div class="ht-font-14 ht-bold ss-title"  [navPush]="'ArticleDetailPage'" [navParams]="{id:info.amoy_id}">
                                {{info.title}}
                            </div>
                            <div class="ht-overflow ht-100">
                                <div class="ht-float-right ht-999 ht-font-14">
                                    <div class="ht-float-left  ht-line-20 ht-font-15">
                                        {{info.time_quantum}}
                                    </div>
                                    <div class="ht-float-left ht-padding-lr ht-line-20">
                                        <i class="fas fa-eye"></i> {{info.see_num}}
                                    </div>
                                    <div class="ht-float-left ht-padding-l5">
                                        <!--<img src="assets/imgs/icon-pl.png" alt="" class="c-icon">-->
                                        <span class="ht-float-left"><i class="far fa-comment"></i> 评论</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
                <ion-infinite-scroll-content></ion-infinite-scroll-content>
            </ion-infinite-scroll>
        </div>
        <div *ngIf="tab == 'service_information'">
            <div class="ht-margin-bottom ht-background ht-overflow" padding-top *ngFor="let info of infolist" [navPush]="'ArticleDetailPage'" [navParams]="{id:info.amoy_id}">
                <p padding-left padding-right class="ht-font-14 ht-000 ht-line-25 ht-padding-bottom10">
                    {{info.title}}
                </p>
                <div padding-left padding-right class="ht-padding-bottom10"  [navPush]="'ArticleDetailPage'" [navParams]="{id:info.amoy_id}">
                    <img src="assets/imgs/service-banner.png" alt="" style="height:80px;width:135px;">
                </div>
                <div class="ht-100 ht-overflow ht-border-bottom" padding-bottom padding-left padding-right>
                    <div class="ht-10 ht-float-left">
                        <img [src]="util.parseImageUrl(info.head_img)" alt="" class="c-tx">
                    </div>
                    <div class="ht-90 ht-float-left ht-overflow ht-padding-tb5 ht-font-12 ht-999">
                        <div class="ht-float-left">{{info.nickname}}</div>
                        <div class="ht-float-right ht-overflow">
                            <div class="ht-float-left ht-padding-l5">{{info.time_quantum}}</div>
                            <div class="ht-float-left ht-padding-l5">
                                <!--<img src="assets/imgs/icon-fx.png" alt="" class="c-icon">-->
                                <span class="ht-float-left"><i class="fa fa-share-square"></i> 分享</span>
                            </div>
                            <div class="ht-float-left ht-padding-l5">
                                <!--<img src="assets/imgs/icon-pl.png" alt="" class="c-icon">-->
                                <span class="ht-float-left"><i class="far fa-comment"></i> 评论</span>
                            </div>
                            <div class="ht-float-left ht-padding-l5">
                                <!--<img src="assets/imgs/icon-z.png" alt="" class="c-icon">-->
                                <span class="ht-float-left"><i class="far fa-heart"></i> 赞</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div padding-left padding-right padding-top>
                    <div class="ht-padding-bottom10 ht-font-13 ht-999">
                        <span class="ht-333">踏雪寻梅：</span>挺好的，不错呢！&nbsp;&nbsp;&nbsp;回复
                    </div>
                    <div class="ht-padding-bottom10 ht-font-13 ht-999">
                        <span class="ht-333">蜡笔小新：</span>回复<span class="ht-333">踏雪寻梅：</span>谢谢啊，多多支持！
                    </div>
                </div>
            </div>
            <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
                <ion-infinite-scroll-content></ion-infinite-scroll-content>
            </ion-infinite-scroll>
        </div>
    </div>
</ion-content>
